<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
<!--  v-for :遍历数据
   语法:<标签 v-for="元素 in 数据源"></>标签>
        <标签 v-for="(元素,index) in 数据源" ></>标签>
   -->
       <ul><!-- 循环数组-->
           <li v-for="hobby in hobbies">{{hobby}}</li>
       </ul>
        <h2>遍历对象:依次取出每个属性对应的值</h2>
        <ul>
            <li v-for="a in student">{{a}}</li>
        </ul>
        <h2>带索引循环数组</h2>
        <ul>
            <li v-for="(hobby,index) in hobbies">{{index+1}}---{{hobby}}</li>
        </ul>

        <h2>带键遍历对象</h2>
        <ul>
            <li v-for="(value,key,index) in student">{{index+1}}--{{key}}----{{value}}</li>
        </ul>
    </div>
</body>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                hobbies:["爬山","游泳","吃饭","睡觉","原神"],
                student:{
                    name: "老王",
                    age: 18,
                    color: "pink",
                    hobbies:["爬山","游泳","吃饭","睡觉","原神"]
                }
            },
            methods:{}

        })
    </script>
</html>